import { Component, ReactNode } from "react";
import { ScrollView, View, Text, RichText, Image } from "@tarojs/components";
import { AtButton } from "taro-ui";
import i2 from "./images/i2.png";
import Taro from "@tarojs/taro";
import Req from "../../utils/request";
import "./index.scss";
export default class ExpenseDetail extends Component {
  state = {
    amount: "",
    payDate: "",
    payeeName: "",
    memo: ``,
    futuresProjectId: ""
  };

  componentDidMount(): void {
    this.initData();
    Taro.eventCenter.on("refreshData", this._onBackRefresh);

  }
  _onBackRefresh = (v) => {
    if (v.force) {
      this.initData(v.did)
    }
  };
  componentWillUnmount(): void {
    Taro.eventCenter.off("refreshData",this._onBackRefresh);
  }
  initData = (did = null) => {
    const { router } = Taro.getCurrentInstance();
    let _did = router?.params.id;//后退的返回router 获取的id还是前面的
    if (did) {//返回获取的id
      _did = did
    }
    if (_did) {
      Req.get("/project/expenses/" + _did)
        .then((r) => {
          if (r.code === 200) {
            this.setState({
              futuresProjectId: r.data.futuresProjectId,
              payDate: r.data.payDate,
              amount: r.data.amount,
              memo: r.data.memo,
              payeeName: r.data.payee.name
            });
          }
        })
        .catch((e) => { });

    }

  };
  render(): ReactNode {
    const { payDate, amount, memo, payeeName, futuresProjectId } = this.state;
    return (
      <View className="ed-container">
        <ScrollView scrollY className="em-scroll-container">
          <View className="ed-main-wrapper">
            <View className="ed-m-price">
              <Text className="ed-m-t1">{amount}</Text>
              <Text className="ed-m-t2">万元</Text>
            </View>
            <View>
              <Text className="date-t1">
                支出日期丨{payDate}<Text className="date-t2"></Text>
              </Text>
            </View>
            <View className="line"></View>
            <View className="ed-m-company">
              <Image className="ed-m-img" src={i2} />
              <Text className="ed-m-c-t1">{payeeName}</Text>
            </View>
            <View className="test-wrapper">
              {memo}
            </View>
          </View>
        </ScrollView>
        <View className="bottom-btns">
          <AtButton
            onClick={() => {
              Taro.showModal({
                title: "提示",
                content: "确认删除？",
                success: (res) => {
                  console.log("res", res);
                  if (res.confirm) {
                    const { router } = Taro.getCurrentInstance();
                    Req.post(`/project/expenses/${router?.params.id}`).then(r => {
                      if (r.code === 200) {
                        Taro.eventCenter.trigger("refreshData", { force: true,
                          futuresProjectId
                        });
                        Taro.navigateBack();
                      }
                    })
                  }
                },
              });
            }}
            className="info-btn-color" circle type="primary">
            删除
          </AtButton>
          <AtButton
            className="primary-btn-color"
            circle
            onClick={() => {
              const { router } = Taro.getCurrentInstance();
              Taro.navigateTo({
                url: `/pages/expense-form/index?did=${router?.params.id}&id=${futuresProjectId}`
              })
            }}
            type="primary"
          >
            编辑
          </AtButton>
        </View>
      </View>
    );
  }
}
